import { observer } from '@formily/react';
import BizHeader from '@inbiz/basic/BizHeader';
import BizBody from '@inbiz/basic/BizBody';
import { useEffect, useState } from 'react';
import './style.less';

export interface HtmlProps {
  /**
   * @description 组件样式名，和style样式对应 ↓↓ eg: inbiz-Html ↓↓
   */
  prefixCls?: string;
  disposition?: any;
  title?: any;
  icon?: any;
  titlesize?: number;
  titlecolor?: any;
  titlebgcolor?: any;
  height?: any;
  className?: string;
  style?: any;
  headerStyle?: any;
}

export const Html = observer((props: HtmlProps) => {
  const { disposition, className } = props;
  const [html, sethtml] = useState('');
  useEffect(() => {
    sethtml(disposition);
    return () => { };
  }, [disposition]);

  return (
    <div className={`inbiz-html ${className}`}>
      <BizHeader {...props} />
      <BizBody {...props}>
        <div
          className="inbiz-html-content"
          dangerouslySetInnerHTML={{ __html: unescape(html) }}
        />
      </BizBody>
    </div>
  );
})

export default Html;
